<template>
	<view class="page">
		<u--input class="input" v-model="account" fontSize="28rpx" placeholder="请输入账号"></u--input>
		<u--input class="input" v-model="password" fontSize="28rpx" placeholder="请输入密码" :password="true"></u--input>

		<u-button class="button" text="登录" type="primary" v-on:click="handleLogin()"></u-button>
		<view class="register-text" v-on:click="jumpPage()">
			<text>去注册</text>
		</view>
	</view>
</template>

<script>
	import {
		login,
		setAccountInfoLocal,
		getAccountInfoLocal
	} from "@/pages/user/js/login.js"
	export default {
		data() {
			return {
				account: "",
				password: ""
			};
		},
		onLoad() {
			getAccountInfoLocal(response => {
				let data = response.data;
				this.account = data.account;
				this.password = data.password;
			})
		},
		methods: {
			/**
			 * 处理登录
			 */
			handleLogin() {
				const account = this.account;
				const password = this.password;
				if (account.length === 0) {
					uni.showToast({
						icon: "none",
						title: "请输入账号"
					})
				} else if (password.length === 0) {
					uni.showToast({
						icon: "none",
						title: "请输入密码"
					})
				} else {
					login(account, password)
						.then(response => {
							//缓存账号信息
							setAccountInfoLocal(account, password);
							uni.showToast({
								icon: "none",
								title: "登录成功",
								duration:2000,
								complete: () => {
									uni.navigateTo({
										url:'/pages/index/index'
									})
								}
							})
						})
				}
			},
			jumpPage() {
				uni.navigateTo({
					url: "/pages/user/register"
				})
			},

			/**
			 * 外部调用 刷新页面 传递数据
			 * @param {Object} accountInfo
			 */
			refreshPage(accountInfo) {
				this.account = accountInfo.account;
				this.password = accountInfo.password;
			},
		}
	}
</script>

<style lang="less">
	.page {
		width: 100%;
		height: 100vh;
		padding: 24rpx;
		box-sizing: border-box;

	}

	.input {
		height: 40rpx;
		margin-bottom: 24rpx;


	}

	.button {
		height: 80rpx;
		margin-top: 40rpx;

	}

	.register-text {
		font-size: 28rpx;
		color: #007AFF;
		text-align: end;
		margin-top: 40rpx;
	}
</style>
